<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类页</title>
    <link rel="stylesheet" type="text/css"
          href="bootstrap/bootstrap.4.1.0.css">
    <script src="./bootstrap/jquery.3.2.1.min.js"></script>
    <script src="./bootstrap/popper.12.5.min.js"></script>
    <script src="./bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="./layui/layer/layer.js"></script>
    <script src="./layui/laydate/laydate.js"></script>
    <script src="./vue/Vue.js"></script>
    <script src="./vue/axios.js"></script>
</head>

<body>
    <div>
        <h1>方圆汽配</h1>
    </div>
    <div id="app">
        <button @click="backToIndex" class="btn-dark">返回首页</button>
        <br><br>
        <input type="text" v-model="name">
        <button @click="addType" class="btn-primary">新增种类</button>
        <br><br>
        <div v-if="types!=null">
            <table class="table table-striped table-hover text-center">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>种类</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(type,index) in types" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{type.name}}</td>
                    <td class="btn-group">
                        <input type="button" @click="updateType(type.id)" value="编辑" class="btn-success"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        var vue = new Vue({
            el: "#app",
            data:{
                types:null,
                name:""
            },
            mounted(){
                this.listTypes();
            },
            methods:{
                updateType: function(id) {
                    layer.open({
                        type: 2,
                        title: false,
                        fixed: false,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['40%', '70%'], //宽高
                        content: 'updateType.html?id=' + id
                    })
                },
                backToIndex: function() {
                    location.href = "index.html"
                },
                addType:function() {
                    if (this.name === "") {
                        layer.msg("名称不能为空")
                        return;
                    }
                    let msg = "您确定添加种类《"+ this.name +"》吗"
                    layer.alert(
                        msg,{
                            closeBtn:1,
                            yes:this.doAdd
                        }
                    );
                },
                doAdd:function(){
                    let type = {
                        "name":this.name
                    }
                    axios.post(
                        "/product/type/opr",
                        type
                    ).then(
                        res => {
                            if(res.data.code===200){
                                layer.msg("添加成功");
                                this.name = "";
                                this.listTypes();
                            }else if(res.data.code===500){
                                layer.alert(res.data.message);
                            }
                        }

                    ).catch(response => {
                        layer.alert("服务器忙，请稍后再试")
                        console.log(response)
                    })
                },
                listTypes:function(){
                    axios.post(
                         "/product/type/list"
                    ).then(
                        res => {
                            if(res.data.code===200){
                                this.types = res.data.returnData;
                            }else if(res.data.code===500){
                                layer.alert(res.data.message);
                            }
                        }

                    ).catch(response => {
                        layer.alert("服务器忙，请稍后再试")
                        console.log(response)
                    })
                }
            }
        });
    </script>
</body>
</html>